<template>
  <el-tabs
    type="border-card"
    style="margin: 0 20px; height: 93vh"
    v-model="activeName"
  >
    <el-tab-pane label="裂缝计" name="裂缝计">
      <el-form inline :model="form">
        <el-form-item label="开始时间">
          <el-date-picker
            type="datetime"
            placeholder="选择开始时间"
            size="mini"
            v-model="form.startTime"
            default-time="00:00:00"
            :picker-options="startTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            type="datetime"
            placeholder="选择结束时间"
            size="mini"
            v-model="form.endTime"
            default-time="00:00:00"
            :picker-options="endTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="mini" @click="query">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="mini" @click="week">一周</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="mini" @click="month">一月</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="mini" @click="all">全部</el-button>
        </el-form-item>
      </el-form>
      <div id="crack" class="chart"></div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "CrackChart",
  props: {
    node: Object,
  },
  data() {
    return {
      form: {
        startTime: null,
        endTime: moment().format("YYYY-MM-DD 00:00:00"),
      },
      activeName: "裂缝计",
      rockOffsetChart: null,
    };
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.startTime
            ? time.getTime() > new Date(this.form.endTime).getTime()
            : false,
      };
    },
    endTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form.startTime).getTime()
            : false,
      };
    },
  },
  methods: {
    initRockOffset(resultObj) {
      let list = resultObj.parameter.list;
      if (list != null && list != "undefined") {
        let xData = [],
          yData = [];
        for (let i = 0; i < list.length; i++) {
          xData.push(list[i].collectDate);
          yData.push(Math.abs(list[i].waterPressure).toFixed(1));
        }
        let chartOption = {
          title: {
            text: "裂缝计",
            left: "center",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            top: 30,
            data: ["裂缝(mm)"],
          },
          grid: {
            left: "20%",
            right: "20%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
            right: "5%",
          },
          xAxis: {
            name: "时间",
            type: "category",
            boundaryGap: true,
            data: xData,
          },
          yAxis: {
            name: "裂缝（mm）",
            type: "value",
            splitNumber: 10,
            // interval:10,
            axisLabel: {
              formatter: "{value} mm",
            },
            min: function (value) {
              return (value.min - 1).toFixed(1);
            },
            max: function (value) {
              return (value.max + 1).toFixed(1);
            },
          },
          series: [
            {
              name: "裂缝(mm)",
              type: "line",
              barGap: 0,
              color: ["#99cc66"],
              data: yData,
            },
          ],
        };
        this.rockOffsetChart.setOption(chartOption);
        this.rockOffsetChart.resize();
      }
    },
    search(startTime, endTime) {
      this.rockOffsetChart.showLoading();
      let queryData = {
        startTime,
        endTime,
      };
      sessionStorage.setItem("startTime", queryData.startTime);
      sessionStorage.setItem("endTime", queryData.endTime);
      this.form.startTime = queryData.startTime;
      this.form.endTime = queryData.endTime;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"tunnelNumber\\":\\"\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\"}","serviceCode":"queryGapByDate","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.rockOffsetChart.hideLoading();
        this.initRockOffset(res.data);
      });
    },
    query() {
      this.search(
        moment(this.form.startTime).format("YYYY-MM-DD"),
        moment(this.form.endTime).format("YYYY-MM-DD")
      );
    },
    week() {
      this.search(
        moment().subtract(7, "d").format("YYYY-MM-DD"),
        moment().format("YYYY-MM-DD")
      );
    },
    month() {
      this.search(
        moment().subtract(31, "d").format("YYYY-MM-DD"),
        moment().format("YYYY-MM-DD")
      );
    },
    all() {
      this.search(
        moment().subtract(1860, "d").format("YYYY-MM-DD"),
        moment().format("YYYY-MM-DD")
      );
    },
  },
  mounted() {
    this.rockOffsetChart = this.$echarts.init(document.getElementById("crack"));
    this.rockOffsetChart.showLoading();
    let queryData = {
      startTime: moment().subtract(1860, "d").format("YYYY-MM-DD"),
      endTime: moment().format("YYYY-MM-DD"),
    };
    if (sessionStorage.getItem("startTime"))
      queryData.startTime = sessionStorage.getItem("startTime");
    if (sessionStorage.getItem("endTime"))
      queryData.endTime = sessionStorage.getItem("endTime");
    this.form.startTime = moment(queryData.startTime).format(
      "YYYY-MM-DD 00:00:00"
    );
    this.form.endTime = moment(queryData.endTime).format("YYYY-MM-DD 00:00:00");
    Axios({
      url: serviceApi.KB_API,
      method: "post",
      data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"tunnelNumber\\":\\"\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\"}","serviceCode":"queryGapByDate","timestamp":"","uuid":""}`,
    }).then((res) => {
      this.rockOffsetChart.hideLoading();
      this.initRockOffset(res.data);
    });
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 1600px;
  height: 75vh;
}
</style>